<template>
	<canvas class="canvasId" canvas-id="canvasId" style="width: 600rpx;height: 950rpx;"></canvas>
</template>
<script>
import QrCodeGenerator from '@/components/piaoyi-poster/QrCodeGenerator.vue'
export default {
	data() {
		return {
			ctx: null,
			canvasWidth: 340,
			canvasHeight: 800,
			deviceType: '' // 存储设备类型，用于区分安卓和苹果设备
		};
	},
	props: {
		imgImage: {
			type: String,
			default: '' // 默认本地图片
		},
		qrImage: {
			type: String,
			default: '' // 默认本地二维码图片
		},
		title: {
			type: String,
			default: 'ikran 影视厅'
		},
		shopName: {
			type: String,
			default: 'ikran 影视厅'
		},
		detail: {
			type: String,
			default: 'سۈزۈكلىكى يۇقرى ، تولوق ، ئەڭ يىڭى مەزمۇنلار'
		},
		price: {
			type: Number,
			default: 90
		},
		years: {
			type: String,
			default: '2025'
		},
		yurts: {
			type: String,
			default: ''
		},
		tags1: {
			type: String,
			default: ''
		},
		tags2: {
			type: String,
			default: ''
		},
		tags3: {
			type: String,
			default: ''
		}
	},
	mounted() {
		this.ctx = uni.createCanvasContext('canvasId', this)
		this.getDeviceInfo();
	},
	methods: {
		// 获取设备信息并判断设备类型
		getDeviceInfo() {
			try {
				const sysInfo = uni.getSystemInfoSync();
				const ratio = sysInfo.windowWidth / 750; // 计算 rpx 到 px 的转换比例
				this.canvasWidth = 600 * ratio;
				this.canvasHeight = 950 * ratio;
				// 判断设备类型
				this.deviceType = sysInfo.platform === 'android' ? 'android' : 'ios';
				this.init();
			} catch (e) {
				console.error('获取设备信息失败:', e);
				return null;
			}
		},
		open() {
			uni.showLoading({
				title: '请稍后...'
			})
			this.init()
			console.log("该绘制的图片：", this.imgImage);
		},
		init() {
			uni.getImageInfo({
				src: this.imgImage,
				success: (res) => {
					uni.getImageInfo({
						src: this.qrImage,
						success: (tes) => {
							// 使用导入的图片变量
							this.ctx.drawImage(res.path, 0, 0, this.canvasWidth, this
								.canvasHeight)
							// 设置全局字体样式为 CustomFont，备用字体为 sans-serif
							this.ctx.font = '14px CustomFont, sans-serif';


							// 统一布局计算（基于750rpx基准）
							const offsetX = 0;
							const offsetY = 0;

							// 绘制标题区域
							this.ctx.beginPath()
							// this.ctx.moveTo(80 + 25, 0 )
							// this.ctx.lineTo(90 + 25, 25 )
							// this.ctx.lineTo(210 + 25, 25)
							// this.ctx.lineTo(220 + 25, 0)
							this.ctx.moveTo(this.canvasWidth / 3, 0)
							this.ctx.lineTo(this.canvasWidth / 3 + 10, 25)
							this.ctx.lineTo(this.canvasWidth / 1.5, 25)
							this.ctx.lineTo(this.canvasWidth / 1.5 + 10, 0)

							this.ctx.setStrokeStyle('#DA2A1E')
							this.ctx.setFillStyle('#DA2A1E')
							this.ctx.fill()
							this.ctx.setFontSize(14)
							this.ctx.setFillStyle("#fff")
							this.ctx.setTextAlign('center')
							this.ctx.fillText(this.title, this.canvasWidth / 2 + 5, 17)

							// 设置阴影属性
							this.ctx.shadowOffsetX = 2;
							this.ctx.shadowOffsetY = 2;
							this.ctx.shadowColor = '#000';
							this.ctx.shadowBlur = 5;

							this.ctx.fillText(this.detail, this.canvasWidth / 2, 50);

							// 设置填充颜色
							this.ctx.setFillStyle('#fff');

							// 设置阴影效果
							this.ctx.shadowOffsetX = 0;
							this.ctx.shadowOffsetY = 0;
							this.ctx.shadowColor = '#ccc';
							this.ctx.shadowBlur = 5;

							// 圆角矩形参数
							const x = 0,
								y = this.canvasHeight - 140,
								w = this.canvasWidth,
								h = 165,
								r = 15;

							// 开始路径
							this.ctx.beginPath();
							// 左上角圆角
							this.ctx.moveTo(x + r, y);
							this.ctx.lineTo(x + w - r, y);
							this.ctx.arcTo(x + w, y, x + w, y + r, r);

							// 右上角圆角
							this.ctx.lineTo(x + w, y + h - r);
							this.ctx.arcTo(x + w, y + h, x + w - r, y + h, r);

							// 右下角圆角
							this.ctx.lineTo(x + r, y + h);
							this.ctx.arcTo(x, y + h, x, y + h - r, r);

							// 左下角圆角
							this.ctx.lineTo(x, y + r);
							this.ctx.arcTo(x, y, x + r, y, r);

							// 完成路径
							this.ctx.closePath();

							// 填充绘制
							this.ctx.fill();
							// 在绘制文本前设置文本方向为从右到左
							this.ctx.textDirection = 'rtl';
							this.ctx.setFillStyle("#000")
							this.ctx.setTextAlign('right')
							// 优化shopName显示，防止超出范围
							this.ctx.setFontSize(18)
							let shopNameWidth = this.ctx.measureText(this.shopName).width;
							const maxShopNameWidth = this.canvasWidth - 30; // 留出15px边距

							if (shopNameWidth > maxShopNameWidth) {
								// 如果文本过长，逐渐减小字体大小直到合适
								let fontSize = 18;
								while (shopNameWidth > maxShopNameWidth && fontSize > 8) {
									fontSize--;
									this.ctx.setFontSize(fontSize);
									shopNameWidth = this.ctx.measureText(this.shopName).width;
								}
							}
							this.ctx.fillText(this.shopName, this.canvasWidth - 15, this
								.canvasHeight - 112)
							// 移除无用的空字符串填充代码
							// this.ctx.setFontSize(12)
							// 在绘制文本前设置文本方向为从右到左
							this.ctx.textAlign = 'right';
							this.ctx.textDirection = 'rtl';
							// 确保字体设置生效，避免被后续操作覆盖
							// 优化tags显示
							this.ctx.font = '12rpx CustomFont, sans-serif';
							this.ctx.setFontSize(12);
							this.ctx.fillText(this.years, this.canvasWidth - 15, this.canvasHeight - 90);
							// 构建标签数组
							const tags = [this.yurts , this.tags1, this.tags2, this.tags3
							].filter(tag => tag);

							if (tags.length > 0) {
								// 从右到左绘制标签
								let currentX = this.canvasWidth -15;
								for (let i = 0; i < tags.length; i++) {
									const tagWidth = this.ctx.measureText(tags[i]).width;
									currentX -= 15; // 添加标签间距
									currentX -= tagWidth;
									this.ctx.fillText(tags[i], currentX, this.canvasHeight - 90);
									// 如果不是最后一个标签，添加分隔符
									// if (i < tags.length - 1) {
									// 	currentX -= 15; // 分隔符和标签之间的间距
									// 	this.ctx.fillText('|', currentX, this.canvasHeight - 90);
									// 	currentX -= 10; // 分隔符宽度
									// }
								}
							}

							const radius = 38;
							// const centerX = this.canvasWidth - 106 + offsetX; 
							// const centerY = 460 + offsetY;

							const centerX = 15;
							const centerY = this.canvasHeight - 83;

							// this.ctx.setFontSize(18)
							this.ctx.font = '18rpx CustomFont, sans-serif';
							this.ctx.fillStyle = '#000';
							this.ctx.fillText('! سىكانىرلاپ كۆرۈڭ ', this.canvasWidth - 50 +
								offsetX, centerY +
								45 + offsetY);

							// 绘制方形二维码
							this.ctx.drawImage(tes.path, centerX, centerY, radius * 2, radius *
								2);

							this.ctx.draw(false, () => {
								setTimeout(() => {
									uni.canvasToTempFilePath({
										canvasId: 'canvasId',
										success: (res) => {
											console.log("绘制图片信息",
												res)
											this.$emit(
												'tempFilePath',
												res
													.tempFilePath)
										},
										fail: (error) => {
											uni.showToast({
												title: JSON
													.stringify(
														error
													),
												icon: 'none'
											})
										},
										complete: () => {
											uni.hideLoading()
										}
									}, this);
								}, 300)
							});
						}
					});
				}
			});
		},
		drawText(text, x, y, width, fs, rowHeight) {
			let test = text.split("")
			let temp = ""
			let row = []
			this.ctx.font = `${fs}px 微软雅黑`
			this.ctx.fillStyle = "#333"
			this.ctx.textBaseline = "middle"
			for (let i = 0; i < test.length; i++) {
				if (this.ctx.measureText(temp).width > width) {
					row.push(temp)
					temp = ""
				}
				temp += test[i]
			}
			row.push(temp)
			for (let j = 0; j < row.length; j++) {
				this.ctx.fillText(row[j], x, y + (j + 1) * rowHeight)
			}
		},
		Point(x, y) {
			return {
				x: x,
				y: y
			};
		},
		Rect(x, y, w, h) {
			return {
				x: x,
				y: y,
				width: w,
				height: h
			};
		}
	}
}
</script>


<style scoped lang="scss">
.canvasId {
	position: fixed;
	left: -200vw;
	top: 0;
}
</style>